<template>
    <div>
        <tt-header :options="headerInfo"></tt-header>

        <div class="bui-box container">
            <!-- 左侧 -->
            <div class="bui-left index-channel" ga_event="channel_click">
                <channel :tag="tag"></channel>
            </div>
            <!-- 中间 -->
            <div class="bui-left index-content">
                <news-slide></news-slide>
                <feed-box :category="category" :url="url" :qhAdSupport="qhAdSupport"></feed-box>
            </div>
            <!-- 右侧 -->
            <div class="bui-right index-right-bar" id="rightModule">
                <!-- 搜索框 -->
                <search-box></search-box>

                <!-- 举报专区 -->
                <report></report>

                <!-- 广告 top1 -->
                <div class="right-top-1 right-iframe-img right-img" name="home_right*top_1_zy"></div>

                <!-- 24小时热闻 -->
                <div class="news-struct bui-box" v-if="news && news.length">
                    <div id="hotNewsWrap" class="bui-box" :class="{'module-fixed': newsHover}">
                        <hot-news :list="news" :count="4" title="24小时热闻"></hot-news>
                        <!-- 广告 bottom1 -->
                        <div v-show="isShowNewsImg" id="imagindexhover" class="imagindexhover right-img" name="home_right*bottom_1_zy"></div>
                    </div>
                </div>

                <!-- 广告 top2 -->
                <div class="right-iframe-img right-img" name="home_right*top_2_zy"></div>

                <!-- 热门视频 -->
                <hot-videos :count="6"></hot-videos>

                <!-- 广告 top3 -->
                <div class="right-iframe-img right-img" name="home_right*top_3_zy"></div>

                <!-- 精彩图片 -->
                <hot-images :count="6"></hot-images>
                <!-- 更多链接 -->
                <more-links title="更多"></more-links>
                <!-- 友情链接 -->
                <friend-links title="友情链接"></friend-links>
                <!-- 公司版权 -->
                <company></company>
            </div>
        </div>
        <toolbar :show-refresh="true" :refresh-method="refreshFeed"></toolbar>
    </div>
</template>

<script>
  import eventBus from 'byted-toutiao-pc-business-components/src/js/eventBus.js'
  import { elOffset, getScrollTop } from 'byted-toutiao-pc-business-components/src/js/utils.js'
  import throttle from 'lodash/throttle'

  import TtHeader from 'byted-toutiao-pc-business-components/components/header'
  import FeedBox from 'byted-toutiao-pc-business-components/components/feed'
  import SearchBox from 'byted-toutiao-pc-business-components/components/searchbox'
  import Toolbar from 'byted-toutiao-pc-business-components/components/toolbar'
  import Report from '../../components/report'
  import HotNews from '../../components/hotNews/src/hotNews'
  import HotVideos from 'byted-toutiao-pc-business-components/components/hotvideos'
  import HotImages from 'byted-toutiao-pc-business-components/components/hotimages'
  import MoreLinks from '../../components/moreLinks/moreLinks'
  import FriendLinks from '../../components/friendLinks/src/friendLinks'
  import Company from '../../components/company'
  import NewsSlide from '../../components/newsSlide'
  import Channel from '../../components/channel'

  const BASE_DATA = window.BASE_DATA || {}
  const PAGE_SWITCH = window.PAGE_SWITCH || {}

  export default {
    name: 'app',
    data () {
      return {
        category: BASE_DATA.category,
        url: '/api/pc/feed/',
        qhAdSupport: PAGE_SWITCH.qihuAdShow || false,
        headerInfo: BASE_DATA.headerInfo,
        news: BASE_DATA.hotArticles,
        tag: BASE_DATA.tag,
        newsHover: false,
        isShowNewsImg: false
      }
    },
    methods: {
      refreshFeed () {
        eventBus.$emit('feed-refresh-bus')
      }
    },
    mounted () {
      var mRight = document.getElementById('rightModule') // 大块
      var mRightTop = elOffset(mRight).top // 大块 top
      var mRightHeight = 0
      var scrollTopNum = 0

      window.addEventListener('scroll', throttle(() => {
        mRightHeight = mRight.clientHeight // 大块总高度
        scrollTopNum = getScrollTop(window) // 滚动高度

        if (mRightTop + mRightHeight > scrollTopNum) {
          this.newsHover = false
          this.isShowNewsImg = false
        } else {
          this.newsHover = true
          this.isShowNewsImg = true
        }
      }, 60), false)
    },
    components: {
      TtHeader,
      NewsSlide,
      FeedBox,
      Channel,
      SearchBox,
      HotNews,
      HotVideos,
      HotImages,
      MoreLinks,
      FriendLinks,
      Report,
      Company,
      Toolbar
    }
  }
</script>

<style lang="less">

    .container{width:1170px;margin:0 auto;margin-top:16px;min-height:1500px
    }
    .container .index-channel{width:110px;height:600px;margin-right:30px;background-color:#fff
    }
    .container .index-content{width:660px
    }
    .container .index-right-bar{width:340px
    }
    .container .index-right-bar .news-struct{height:386px
    }
    .container .index-right-bar .news-struct .module-fixed{position:fixed;top:10px
    }
    .container .index-right-bar .news-struct #imagindexhover{width:340px
    }
    .toolbar{position:fixed;bottom:36px;left:50%;margin-left:588px
    }
    .toolbar i{vertical-align:middle
    }
</style>
